<%--
  Created by IntelliJ IDEA.
  User: Muerzhi
  Date: 2023/12/13
  Time: 21:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书馆登录</title>
</head>
<link type="text/css" rel="stylesheet" href="css/login.css">

<body background="picture/img.png"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
<div class="background">
    <ul id="tab">
        <li><a href="#content1">账号密码登录</a></li>
        <li><a href="#content2">账号注册</a></li>
    </ul>
    <div id="content">
        <div id="content2">
            <form action="zc.jsp" method="get">
                <p><input type="text" placeholder="请输入新的账号" class="name" name="newAccount"></p>
                <p><input type="text" placeholder="请输入新的密码" class="name" name="password1"></p>
                <p><input type="text" placeholder="确认密码" class="name" name="password2"></p>
                <p><input type="submit" value="注册" class="into" id="button1"></p>
                <p class="pact"><input type="checkbox"clas="pact1" checked>同意并接受“<a href="#" >钞人安全条款及协议“</a></p>
            </form>
        </div>
        <div id="content1">
            <form action="loginOne.jsp" method="post">
                <p><input type="text"  value placeholder="手机/用户名/邮箱" class="name" name="account"></p>
                <p><input type="text"  value placeholder="密码" class="name" name="password"></p>
                <p><input type="text"  value placeholder="验证码             发送验证码" class="name"></p>
                <p><input type="submit" value="登录" class="into" id="button2"></p>
                <p class="pact"><input type="checkbox"clas="pact1" checked>同意并接受“<a href="#" >钞人安全条款及协议“</a></p>
            </form>
        </div>

    </div>

</div>
</body>
<script>
    // 当点某一个标签的时候对应的 div 显示，其他的隐藏。
    // 查找触发事件的元素
    var as = document.querySelectorAll("#tab a");
    // 绑定事件处理函数
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 隐藏所有的 div
            var divs = document.querySelectorAll("#content>div");
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = "none";
            }
            // 让对应的 div显示
            // 获取当前的 a 的 href
            var i = this.href.lastIndexOf("#");
            var id = this.href.slice(i);
            console.log(id)
            document.querySelector(id).style.display = "block";
        }

    }
</script>
</html>

